<template>
  <div class="CoursePhilosophy">
    <Title :title="title" />
    <div class="cloud-disk-box">
      <div class="wind-1240 cloud-disk">
        <div class="displayFlex2">
          <!-- 左边菜单显示区域begin -->
          <div class="serach cloud-disk-left">
            <ul class="nav-list">
              <li
                v-for="(item, index) in chapterTwoListArr"
                :key="index"
                @click="handleLeftNav(index, item)"
                :class="[
                  'nav-item',
                  index === currentNavIndex ? 'nav-item-active' : '',
                ]"
                style="display: flex; align-items: center"
              >
                <img
                  src="/public/img/chapter-icon-act.svg"
                  alt=""
                  v-if="index === currentNavIndex"
                />
                <img v-else src="/public/img/chapter-icon.svg" alt="" />
                <span>{{ item.label }}</span>
              </li>
            </ul>
          </div>

          <!--  右边文件显示区域 begin -->
          <div class="cloud-disk-right">
            <!-- 文件/文件夹 表格 begin -->
            <div class="cloud-disk-right-files-table">
              <el-table
                ref="multipleTable"
                :data="currFilesList"
                height="465"
                v-loading="isLoadingTable"
                :header-cell-style="{ padding: '5px 0' }"
                tooltip-effect="dark"
                @row-dblclick="!isAddFolder ? toFileOrFolder($event) : ''"
                style="width: 100%"
                class="cloud-disk-table"
                empty-text="暂无数据"
                @selection-change="handleSelectionChange"
              >
                <!-- 文件图标加名称 -->
                <el-table-column
                  prop="name"
                  label="名称"
                  show-overflow-tooltip
                  :width="hasPermission ? 260 : 310"
                >
                  <template #default="scope">
                    <el-row align="center">
                      <el-col
                        :span="2"
                        style="display: flex; align-items: center"
                      >
                        <img
                          style="width: 16px; height: 16px"
                          :src="
                            scope.row.type === '1'
                              ? '/public/img/cloud_disk_icon/folder.png'
                              : scope.row.fileType === 'ppt' ||
                                scope.row.fileType === 'pptx'
                              ? '/public/img/cloud_disk_icon/powerpoint.png'
                              : scope.row.fileType === 'doc' ||
                                scope.row.fileType === 'docx' ||
                                scope.row.fileType === 'rtf' ||
                                scope.row.fileType === 'wps'
                              ? '/public/img/cloud_disk_icon/word.png'
                              : scope.row.fileType === 'pdf'
                              ? '/public/img/cloud_disk_icon/pdf.png'
                              : scope.row.fileType === 'zip' ||
                                scope.row.fileType === 'rar' ||
                                scope.row.fileType === '7z'
                              ? '/public/img/cloud_disk_icon/archive.png'
                              : scope.row.fileType === 'xls' ||
                                scope.row.fileType === 'xlsx'
                              ? '/public/img/cloud_disk_icon/excel.png'
                              : scope.row.fileType === 'audio'
                              ? '/public/img/cloud_disk_icon/audio.png'
                              : scope.row.fileType === 'mp4'
                              ? '/public/img/cloud_disk_icon/video.png'
                              : scope.row.fileType === 'image'
                              ? '/public/img/cloud_disk_icon/image.png'
                              : scope.row.fileType === 'txt'
                              ? '/public/img/cloud_disk_icon/document.png'
                              : '/public/img/cloud_disk_icon/file.png'
                          "
                        />
                      </el-col>

                      <el-col :span="22">
                        <span
                          class="folder-name"
                          v-if="scope.row.name !== ''"
                          @click.stop="toFileOrFolder(scope.row, true)"
                          :title="scope.row.name"
                          >{{ scope.row.name }}</span
                        >
                      </el-col>
                    </el-row>
                    <div
                      style="display: none"
                      v-if="scope.row.fileType === 'image'"
                      :class="scope.row.id + 'img'"
                      v-viewer
                    >
                      <img :src="scope.row.fileAccessUrl" alt />
                    </div>
                  </template>
                </el-table-column>
                <!-- 上次修改时间 -->
                <el-table-column prop="fileType" label="文件类型" :width="170">
                </el-table-column>
                <!-- 文件大小 -->
                <el-table-column label="大小" prop="fileSize">
                </el-table-column>
                <el-table-column label="创建人" prop="updateUser">
                </el-table-column>
              </el-table>
            </div>
            <!-- 文件/文件夹 表格 end-->
            <div class="file-num">
              <!-- 已全部加载，共{{ currFilesList.length }}个 -->
            </div>
          </div>
          <!-- 右边文件显示区域 end -->
        </div>
      </div>
    </div>
  </div>
  <el-dialog
    title="文件预览"
    v-model="dialogVisible"
    width="60%"
    :before-close="handleClose"
  >
    <preview
      v-if="activeTab.url"
      :src="activeTab.url"
      :file-type="activeTab.type"
    />
  </el-dialog>
</template>

<script setup>
import { onMounted, ref } from "vue";
import Title from "../common/Title.vue";
import { useSubjectStore } from "../../store/subject";
import { getDetails, getFilesList } from "../../utils/api/courseManage";
import { parseFileList } from "../../utils/aes";
import XnFilePreview from "../common/FilePreview.vue";
import preview from "../../views/preview.vue";
let subjectStore = useSubjectStore();
const props = defineProps({
  title: String,
});
const chapterTwoList = subjectStore.courseDetail.children;
// 找到chapterTwoList 的children合成一个数组
const chapterTwoListArr = subjectStore.chapterList;
const currentNavIndex = ref(0);
const currFolder = ref({});
const currFilePath = ref([]);
const currFilesList = ref([]);
const activeTab = ref({});
const dialogVisible = ref(false);
onMounted(() => {
  getDetail(chapterTwoList[0].id);
});
/**
 * 获取详情
 */
const getDetail = async (id) => {
  const res = await getFilesList({ id });
  const key =
    props.title === "课程思政" ? "ideologicalCourse" : "teachingCaseList";
  let fileList = res?.[key];
  currFilesList.value = fileList ? parseFileList(fileList) : [];
};
/**
 * 左导航切换事件
 */
function handleLeftNav(index, item) {
  //当前导航下标
  currentNavIndex.value = index;
  getDetail(item.id);
}

const toFileOrFolder = (row) => {
  console.log("🚀 ~ toFileOrFolder ~ row:", row);
  activeTab.value = {
    url: row.fileAccessUrl,
    type: row.fileType,
  };
  dialogVisible.value = true;
};
</script>

<style lang="less" scoped>
.CoursePhilosophy {
  padding: 20px 30px;

  .cloud-disk {
    box-sizing: border-box;
  }

  .cloud-disk-left {
    width: 350px;
    overflow-x: hidden;
    overflow-y: auto;
    margin-right: 10px;
  }
  .cloud-disk-right {
    width: calc(100% - 410px);
    height: 100%;
    padding: 10px;
    border-radius: 5px;
    box-sizing: border-box;
    background: #f8faf7;
    margin-top: 13px;
    :deep(*) {
      background: #f8faf7;
      background-color: #f8faf7;
    }
    * {
      background: #f8faf7;
      background-color: #f8faf7;
    }
  }

  /* 左边菜单样式开始 */
  .serach {
    background-color: #fff;
  }

  .displayFlex2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .nav-list {
    width: 100%;
    overflow-y: auto;
  }
  .nav-list .nav-item {
    display: flex;
    align-items: center;
    color: #666;
    cursor: pointer;
    margin-top: 13px;
    margin-bottom: 13px;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 14px;
    background: #f8faf7;
    img {
      width: 20px;
      height: 20px;
    }
  }
  .nav-list .nav-item > i {
    font-size: 20px;
  }
  .nav-list .nav-item > span {
    display: block;
    margin-left: 15px;
  }
  .nav-list .nav-item:hover {
    color: #207402;
    background: #dbf1da;
    font-weight: bold;
  }
  .nav-list .nav-item:hover {
    color: #207402;
  }
  .nav-list .nav-item-active {
    color: #207402;
    background: #dbf1da;
    font-weight: bold;
    span {
      color: #207402;
    }
    i {
      color: #207402;
    }
  }

  /* 左边菜单样式结束 */
  /* 右边文件显示样式开始 */
  .folder-name {
    margin-left: 10px;
    cursor: pointer;
  }
  .folder-name:hover {
    border-bottom: 1px solid #606266;
  }

  /* 右边文件显示样式结束 */
  /* 去掉input的聚焦样式 */
  input:focus {
    outline: none;
    border-color: #207402;
    box-shadow: 0 0 5px #ffffff;
    border-radius: 5px;
  }

  /* 复选框对齐 */
  .cloud-disk-table /deep/ .el-table-column--selection > .cell {
    padding-left: 15px !important;
  }
  .cloud-disk-table /deep/ .el-table-column--selection > .cell .el-checkbox {
    margin-bottom: 0 !important;
  }

  /* 文件数量提示 */
  .file-num {
    text-align: right;
    padding-right: 20px;
    color: #b6b6b6;
  }

  .main-list {
    min-height: 228px;
    .main-list-item {
      display: flex;
      align-items: center;
      padding: 10px;
      cursor: pointer;
      border-bottom: 1px solid #eee;
    }
    .main-list-item:hover {
      background-color: #f5f5f5;
    }
    .trainee-info {
      flex: 2;
      margin-left: 30px;
      & > img {
        width: 30px;
        height: 30px;
        margin-right: 15px;
      }
    }
  }
}
</style>
